<template>
    <div class="fawa-token-page">
        <FawaBanner
            url="/tokenFawa/bg.png"
            title="FAWA Token Economic Model" />


        <!-- 主要内容 -->
        <div class="main-content">
            <!-- 基本信息和代币定位 -->
            <div id="basicInfoSectionId" class="basic-info-section">
                <h2 class="section-title">Token Basic Information and Positioning</h2>

                <div class="basic-info-grid">
                    <div class="info-image">
                        <img
                            src="/tokenFawa/basic-parameters-img.png"
                            alt="FAWA Token" />
                    </div>

                    <div class="info-content">
                        <h3 class="info-subtitle">Basic Parameters</h3>
                        <div class="parameter-list">
                            <div class="parameter-item">
                                <span class="parameter-label">Token Name:</span>
                                <span class="parameter-value">FAWA Token</span>
                            </div>
                            <div class="parameter-item">
                                <span class="parameter-label">Token Symbol:</span>
                                <span class="parameter-value">FAWA</span>
                            </div>
                            <div class="parameter-item">
                                <span class="parameter-label">Total Supply:</span>
                                <span class="parameter-value">900 million</span>
                            </div>
                            <div class="parameter-item">
                                <span class="parameter-label">Issuance Network:</span>
                                <span class="parameter-value"
                                    >Deployed on mainstream public chains, supporting cross-chain
                                    expansion and multi-chain compatibility</span
                                >
                            </div>
                            <div class="parameter-item">
                                <span class="parameter-label">Consensus Mechanism:</span>
                                <span class="parameter-value"
                                    >Combines PoS and DAO governance to ensure security and
                                    community autonomy</span
                                >
                            </div>
                            <div class="parameter-item">
                                <span class="parameter-label">Circulation Characteristics:</span>
                                <span class="parameter-value"
                                    >Phased release, combined with mining, ecological incentives,
                                    and market expansion strategies</span
                                >
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 功能定位 -->
            <div id="functionalPositioningId" class="functional-positioning-section">
                <h2 class="section-title">Functional Positioning</h2>
                <p class="section-description">
                    Possesses dual attributes of utility token and governance token, serving as the
                    core value anchor of the FAWA ecosystem:
                </p>

                <FunctionalPositioning
                    :items="functionalItems"
                    layout="horizontal"
                    :columns="3" />
            </div>

            <!-- 战略价值 -->
            <div id="strategicValueId" class="strategic-value-section">
                <h2 class="section-title">Strategic Value</h2>
                <p class="section-description">
                    The positioning of the FAWA Token is not just an internal "passport" for the
                    platform but also the financial cornerstone supporting FAWA's global development
                    strategy:
                </p>

                <div class="strategic-grid">
                    <div class="strategic-card">
                        <div class="strategic-image">
                            <img
                                src="/tokenFawa/strategic-value-img1.png"
                                alt="Service Value" />
                        </div>
                        <h3 class="strategic-title">Service Value</h3>
                        <p class="strategic-description">
                            As a payment and incentive tool, it ensures the normal operation of the
                            ecosystem and user stickiness.
                        </p>
                    </div>

                    <div class="strategic-card">
                        <div class="strategic-image">
                            <img
                                src="/tokenFawa/strategic-value-img2.png"
                                alt="Financial Value" />
                        </div>
                        <h3 class="strategic-title">Financial Value</h3>
                        <p class="strategic-description">
                            Through DAO governance and RWA integration, it forms a scarce asset with
                            investment attributes.
                        </p>
                    </div>

                    <div class="strategic-card">
                        <div class="strategic-image">
                            <img
                                src="/tokenFawa/strategic-value-img3.png"
                                alt="Social Value" />
                        </div>
                        <h3 class="strategic-title">Social Value</h3>
                        <p class="strategic-description">
                            It enables global women to truly obtain asset returns and identity
                            recognition while using, creating, and governing.
                        </p>
                    </div>

                    <div class="strategic-card">
                        <div class="strategic-image">
                            <img
                                src="/tokenFawa/strategic-value-img4.png"
                                alt="Global capital market connection" />
                        </div>
                        <h3 class="strategic-title">Global Capital Market Connectivity</h3>
                        <p class="strategic-description">
                            In the future, FAWA will promote Token-Equity Synergy. Through avenues
                            like a US stock listing, the FAWA Token will gain stronger value support
                            within the global capital system.
                        </p>
                    </div>
                </div>
            </div>

            <!-- 分配结构和比例设计 -->
            <div id="allocationStructureId" class="distribution-section">
                <h2 class="section-title">Allocation Structure and Ratio Design</h2>
                <p class="section-description">
                    The total supply of FAWA Token is 900 million. The specific allocation is as
                    follows:
                </p>

                <div class="table-container">
                    <div class="distribution-table">
                        <div class="table-header">
                            <div class="header-cell header-spacer"></div>
                            <div class="header-cell header-fixed">Category</div>
                            <div class="header-cell header-fixed">Ratio</div>
                            <div class="header-cell header-fixed">Quantity (Tokens)</div>
                            <div class="header-cell header-fixed">Purpose Description</div>
                            <div class="header-cell header-spacer"></div>
                        </div>

                        <div class="table-row">
                            <div class="table-cell table-spacer"></div>
                            <div class="table-cell table-fixed">
                                <div class="cell-icon">
                                    <img
                                        src="/tokenFawa/icon-card.png"
                                        alt="Mining" />
                                </div>
                                <span>Mining</span>
                            </div>
                            <div class="table-cell table-fixed">40%</div>
                            <div class="table-cell table-fixed">360 Million</div>
                            <div class="table-cell table-fixed">
                                Reward community contributors and node operators, promote Depin
                                infrastructure, computing & storage services
                            </div>
                            <div class="table-cell table-spacer"></div>
                        </div>

                        <div class="table-row">
                            <div class="table-cell table-spacer"></div>
                            <div class="table-cell table-fixed">
                                <div class="cell-icon">
                                    <img
                                        src="/tokenFawa/icon-gift.png"
                                        alt="Mining" />
                                </div>
                                <span>Ecological Build</span>
                            </div>
                            <div class="table-cell table-fixed">25%</div>
                            <div class="table-cell table-fixed">225 million</div>
                            <div class="table-cell table-fixed">
                                Support social apps, digital IP, RWA on-chain, brand globalization,
                                DApp incubation
                            </div>
                            <div class="table-cell table-spacer"></div>
                        </div>

                        <div class="table-row">
                            <div class="table-cell table-spacer"></div>
                            <div class="table-cell table-fixed">
                                <div class="cell-icon">
                                    <img
                                        src="/tokenFawa/icon-bank.png"
                                        alt="Mining" />
                                </div>
                                <span>Foundation</span>
                            </div>
                            <div class="table-cell table-fixed">10%</div>
                            <div class="table-cell table-fixed">90 Million</div>
                            <div class="table-cell table-fixed">
                                Used for compliant operations, strategic investment, global
                                promotion, and public welfare projects
                            </div>
                            <div class="table-cell table-spacer"></div>
                        </div>

                        <div class="table-row">
                            <div class="table-cell table-spacer"></div>
                            <div class="table-cell table-fixed">
                                <div class="cell-icon">
                                    <img
                                        src="/tokenFawa/icon-coin-hand.png"
                                        alt="Mining" />
                                </div>
                                <span>Private Sale</span>
                            </div>
                            <div class="table-cell table-fixed">10%</div>
                            <div class="table-cell table-fixed">90 Million</div>
                            <div class="table-cell table-fixed">
                                For early investors and strategic partners, introducing capital and
                                resource support
                            </div>
                            <div class="table-cell table-spacer"></div>
                        </div>

                        <div class="table-row">
                            <div class="table-cell table-spacer"></div>
                            <div class="table-cell table-fixed">
                                <div class="cell-icon">
                                    <img
                                        src="/tokenFawa/icon-browser-code.png"
                                        alt="Mining" />
                                </div>
                                <span>Investment</span>
                            </div>
                            <div class="table-cell table-fixed">10%</div>
                            <div class="table-cell table-fixed">90 Million</div>
                            <div class="table-cell table-fixed">
                                For future strategic partnerships, industry funds, and capital
                                market connectivity
                            </div>
                            <div class="table-cell table-spacer"></div>
                        </div>

                        <div class="table-row">
                            <div class="table-cell table-spacer"></div>
                            <div class="table-cell table-fixed">
                                <div class="cell-icon">
                                    <img
                                        src="/tokenFawa/icon-globe.png"
                                        alt="Mining" />
                                </div>
                                <span>Tech Development</span>
                            </div>
                            <div class="table-cell table-fixed">5%</div>
                            <div class="table-cell table-fixed">45 Million</div>
                            <div class="table-cell table-fixed">
                                Focus on R&D and security, including Depin cluster, public chain,
                                digital identity system
                            </div>
                            <div class="table-cell table-spacer"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分配设计逻辑 -->
            <div id="allocationDesignId" class="distribution-logic-section">
                <h2 class="section-title">Allocation Design Logic</h2>

                <div class="logic-content">
                    <div class="pie-chart-container">
                        <div class="pie-chart">
                            <img
                                src="/tokenFawa/cricle.png"
                                alt="Distribution Logic" />
                        </div>
                    </div>

                    <div class="logic-descriptions">
                        <div class="logic-item">
                            <strong>Community Driven:</strong> 40% allocated to mining ensures users
                            remain the core driving force of the ecosystem.
                        </div>
                        <div class="logic-item">
                            <strong>Ecological Implementation:</strong> 25% is used for scenarios
                            and cooperation to promote the diversified development of the platform.
                        </div>
                        <div class="logic-item">
                            <strong>Capital Support:</strong> Foundation + Private Sale + Investment
                            total 30%, safeguarding global and compliant expansion.
                        </div>
                        <div class="logic-item">
                            <strong>Technology Safeguard:</strong>5% dedicated to R&D and security
                            ensures the platform's long-term competitiveness.
                        </div>
                    </div>
                </div>
            </div>

            <!-- 代币功能和应用场景 -->
            <div id="applicationScenariosId" class="token-functions-section">
                <h2 class="section-title">Functions and Application Scenarios</h2>
                <p class="section-description">
                    The FAWA Token is not just a circulation tool within the platform but the core
                    hub of the entire ecosystem. It possesses multiple functions including payment,
                    incentive, governance, and asset bearing, ensuring the ecosystem forms a value
                    closed loop.
                </p>

                <div class="table-container">
                    <div class="functions-table">
                        <div class="table-header">
                            <div class="header-cell header-spacer"></div>
                            <div class="header-cell header-fixed">Function Category</div>
                            <div class="header-cell header-fixed">
                                Specific Application Scenario
                            </div>
                            <div class="header-cell header-fixed">Value Description</div>
                            <div class="header-cell header-spacer"></div>
                        </div>

                        <div class="table-row">
                            <div class="table-cell table-spacer"></div>
                            <div class="table-cell table-fixed">
                                <div class="cell-icon">
                                    <img
                                        src="/tokenFawa/icon-card.png"
                                        alt="Mining" />
                                </div>
                                <span>Payment Tool</span>
                            </div>
                            <div class="table-cell table-fixed">
                                Used for social application service fees, NFT transactions, RWA
                                investment settlements
                            </div>
                            <div class="table-cell table-fixed">
                                Build a female - friendly digital payment system and reduce cross -
                                border financial barriers
                            </div>
                            <div class="table-cell table-spacer"></div>
                        </div>

                        <div class="table-row">
                            <div class="table-cell table-spacer"></div>
                            <div class="table-cell table-fixed">
                                <div class="cell-icon">
                                    <img
                                        src="/tokenFawa/icon-gift.png"
                                        alt="Mining" />
                                </div>
                                <span>Incentive Mechanism</span>
                            </div>
                            <div class="table-cell table-fixed">
                                Reward content creation, community interaction, node contribution,
                                brand promotion
                            </div>
                            <div class="table-cell table-fixed">
                                Convert every user's participation into measurable on - chain value
                            </div>
                            <div class="table-cell table-spacer"></div>
                        </div>

                        <div class="table-row">
                            <div class="table-cell table-spacer"></div>
                            <div class="table-cell table-fixed">
                                <div class="cell-icon">
                                    <img
                                        src="/tokenFawa/icon-bank.png"
                                        alt="Mining" />
                                </div>
                                <span>Governance Credential</span>
                            </div>
                            <div class="table-cell table-fixed">
                                DAO voting, proposal submission, participation in community self -
                                governance
                            </div>
                            <div class="table-cell table-fixed">
                                Endow female users with real discourse power and governance rights
                            </div>
                            <div class="table-cell table-spacer"></div>
                        </div>

                        <div class="table-row">
                            <div class="table-cell table-spacer"></div>
                            <div class="table-cell table-fixed">
                                <div class="cell-icon">
                                    <img
                                        src="/tokenFawa/icon-coin-hand.png"
                                        alt="Mining" />
                                </div>
                                <span>Asset Peg</span>
                            </div>
                            <div class="table-cell table-fixed">
                                DID digital identity, NFT, RWA asset on-chain
                            </div>
                            <div class="table-cell table-fixed">
                                Serve as the value carrier for all on-chain assets within the
                                ecosystem
                            </div>
                            <div class="table-cell table-spacer"></div>
                        </div>

                        <div class="table-row">
                            <div class="table-cell table-spacer"></div>
                            <div class="table-cell table-fixed">
                                <div class="cell-icon">
                                    <img
                                        src="/tokenFawa/icon-browser-code.png"
                                        alt="Mining" />
                                </div>
                                <span>Technical Driver</span>
                            </div>
                            <div class="table-cell table-fixed">
                                Incentivize Depin node operation (compute, storage, bandwidth)
                            </div>
                            <div class="table-cell table-fixed">
                                Promote infrastructure development, allow women to participate in
                                the node economy
                            </div>
                            <div class="table-cell table-spacer"></div>
                        </div>

                        <div class="table-row">
                            <div class="table-cell table-spacer"></div>
                            <div class="table-cell table-fixed">
                                <div class="cell-icon">
                                    <img
                                        src="/tokenFawa/icon-globe.png"
                                        alt="Mining" />
                                </div>
                                <span>Global Expansion</span>
                            </div>
                            <div class="table-cell table-fixed">
                                Cooperate with international brands, global market promotion,
                                cross-chain interoperability
                            </div>
                            <div class="table-cell table-fixed">
                                Act as a universal value bridge for the global ecological expansion
                                of FAWA
                            </div>
                            <div class="table-cell table-spacer"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue';

    // 添加页面元信息
    // eslint-disable-next-line no-undef
    useHead({
        title: 'FAWA Token - Fawa',
        meta: [
            {
                name: 'description',
                content: 'FAWA Token information, distribution, and application scenarios',
            },
        ],
    });

    // 功能定位数据
    const functionalItems = ref([
        {
            title: 'Payment and Circulation Medium',
            image: '/tokenFawa/functional-positioning-img1.png',
            description: [
                'As the payment method for all products and services within the ecosystem (social applications, IP links, Depin services, RWA investments, etc.',
                'Used for cross-border transfers and value exchange, lowering the financial threshold for female users in global economic activities.',
            ],
        },
        {
            title: 'Incentive and Governance Tool',
            image: '/tokenFawa/functional-positioning-img2.png',
            description: [
                'Ecological users can obtain Token rewards through mining, node contribution, social interaction, and content creation;',
                'As a DAO governance voucher, it endows female users with voting rights and proposal rights in the development of the ecosystem.',
            ],
        },
        {
            title: 'Asset and Value Carrier',
            image: '/tokenFawa/functional-positioning-img3.png',
            description: [
                'Supports various on-chain assets such as digital identity, NFT, RWA asset mapping;',
                'the incentive for Depin infrastructure, it enables contributions of computing power, storage, and bandwidth to be directly converted into on - chain value.',
            ],
        },
    ]);

    // 分配表格数据
    const distributionHeaders = ref(['Category', 'Ratio', 'Quantity (Tokens)', 'Purpose Description']);
    const distributionData = ref([
        [
            { text: 'Mining', icon: '/tokenFawa/icon-card.png' },
            '40%',
            '360 Million',
            'Reward community contributors and node operators, promote Depin infrastructure, computing & storage services'
        ],
        [
            { text: 'Ecological Build', icon: '/tokenFawa/icon-gift.png' },
            '25%',
            '225 million',
            'Support social apps, digital IP, RWA on-chain, brand globalization, DApp incubation'
        ],
        [
            { text: 'Foundation', icon: '/tokenFawa/icon-bank.png' },
            '10%',
            '90 Million',
            'Used for compliant operations, strategic investment, global promotion, and public welfare projects'
        ],
        [
            { text: 'Private Sale', icon: '/tokenFawa/icon-coin-hand.png' },
            '10%',
            '90 Million',
            'For early investors and strategic partners, introducing capital and resource support'
        ],
        [
            { text: 'Investment', icon: '/tokenFawa/icon-browser-code.png' },
            '10%',
            '90 Million',
            'For future strategic partnerships, industry funds, and capital market connectivity'
        ],
        [
            { text: 'Tech Development', icon: '/tokenFawa/icon-globe.png' },
            '5%',
            '45 Million',
            'Focus on R&D and security, including Depin cluster, public chain, digital identity system'
        ]
    ]);

    // 功能表格数据
    const functionsHeaders = ref(['Function Category', 'Specific Application Scenario', 'Value Description']);
    const functionsData = ref([
        [
            { text: 'Payment Function', icon: '/tokenFawa/icon-card.png' },
            'Platform internal payment, cross-border transfer, value exchange',
            'Reduces transaction costs, improves payment efficiency, and lowers the financial threshold for female users'
        ],
        [
            { text: 'Incentive Function', icon: '/tokenFawa/icon-gift.png' },
            'Mining rewards, node contribution, social interaction, content creation',
            'Motivates user participation, promotes ecosystem development, and creates a positive feedback loop'
        ],
        [
            { text: 'Governance Function', icon: '/tokenFawa/icon-bank.png' },
            'DAO voting, proposal submission, community decision-making',
            'Ensures community autonomy, democratic decision-making, and sustainable development of the ecosystem'
        ],
        [
            { text: 'Asset Function', icon: '/tokenFawa/icon-coin-hand.png' },
            'Digital identity, NFT, RWA asset mapping, Depin infrastructure incentive',
            'Enables on-chain asset management, value preservation, and direct conversion of contributions into value'
        ]
    ]);

    console.log('FAWA Token page mounted');
</script>

<style lang="scss" scoped>
    // 导入响应式 mixins
    @use '@/styles/mixins/responsive' as *;

    .fawa-token-page {
        min-height: 100vh;
        background: #fff;
    }

    .main-content {
        padding: pxToRem(0) pxToRem(20);
        max-width: pxToRem(1560);
        margin: 0 auto;
        background: #fff;
        font-family: 'Figtree', sans-serif;
    }

    .section-title {
        font-size: pxToRem(56);
        font-family: 'SFProDisplayBlack', sans-serif;
        font-weight: 1000;
        color: #000;
        text-align: center;
        margin-bottom: pxToRem(40);
        line-height: 1.2;
        max-width: pxToRem(800);
        margin: 0 auto;
        margin-top: pxToRem(143);
    }

    .section-description {
        font-size: pxToRem(20);
        color: rgba(0, 0, 0, 0.7);
        text-align: center;
        margin-bottom: pxToRem(60);
        line-height: 1.5;
        max-width: pxToRem(1560);
        margin-left: auto;
        margin-right: auto;
        font-weight: 300;
    }

    // 基本信息和代币定位
    .basic-info-section {
        margin-bottom: pxToRem(100);
    }

    .basic-info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: pxToRem(60);
        align-items: center;
        margin-top: pxToRem(40);
    }

    .info-image {
        img {
            width: 100%;
            height: auto;
            border-radius: pxToRem(16);
        }
    }

    .info-content {
        .info-subtitle {
            font-size: pxToRem(40);
            font-weight: 700;
            color: #000000b2;
            margin-bottom: pxToRem(25);
            text-align: left;
        }
    }

    .parameter-list {
        .parameter-item {
            // display: flex;
            margin-bottom: pxToRem(4);
            font-size: pxToRem(30);
            text-align: left;
            .parameter-label {
                font-weight: 700;
                font-family: 'SFProDisplayBold', sans-serif;
                color: #333;
                min-width: pxToRem(200);
                margin-right: pxToRem(20);
                text-align: left;
                color: #000000b2;
            }

            .parameter-value {
                color: #666;
                flex: 1;
                font-weight: 300;
                text-align: left;
            }
        }
    }

    // 功能定位
    .functional-positioning-section {
        margin-bottom: pxToRem(100);
    }

    // 战略价值
    .strategic-value-section {
        margin-bottom: pxToRem(100);
    }

    .strategic-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: pxToRem(40);
        margin-top: pxToRem(40);
    }

    .strategic-card {
        // background: white;
        // border-radius: pxToRem(16);
        padding: pxToRem(0);
        text-align: center;
        // box-shadow: 0 pxToRem(4) pxToRem(20) rgba(0, 0, 0, 0.1);
        // transition: transform 0.3s ease;

        // &:hover {
        //     transform: translateY(-5px);
        // }
    }

    .strategic-image {
        width: 100%;
        // height: pxToRem(200);
        border-radius: pxToRem(12);
        overflow: hidden;
        margin-bottom: pxToRem(20);
        max-width: pxToRem(360);
        max-height: pxToRem(420);

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .strategic-title {
        font-size: pxToRem(32);
        font-family: 'SFProDisplayBold', sans-serif;
        font-weight: 700;
        color: #12141d;
        margin-bottom: pxToRem(12);
        line-height: 1.3;
        margin-top: pxToRem(30);
        margin-bottom: pxToRem(16);
    }

    .strategic-description {
        font-size: pxToRem(24);
        font-weight: 400;
        color: #12141d;
        line-height: 1.5;
        margin-top: 0;
        margin-bottom: 0;
    }

    // 分配结构和比例设计
    .distribution-section {
        margin-bottom: pxToRem(100);
    }

    .table-container {
        // margin: pxToRem(40) pxToRem(-20) 0;
        // padding: 0 pxToRem(20);
        margin: 0;
        padding: 0;
        max-width: 100vw;
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
    }

    .distribution-table {
        // border-radius: pxToRem(12);
        overflow: hidden;
        // box-shadow: 0 pxToRem(4) pxToRem(20) rgba(0, 0, 0, 0.1);
    }

    .table-header {
        display: flex;
        background: #f7f7f7;
        font-weight: 700;
        color: #333;
        justify-content: center;
    }

    .table-row {
        display: flex;
        // border-bottom: 1px solid #e9ecef;
        justify-content: center;
        background: #f7f7f7;

        &:nth-child(even) {
            background: #fff;
        }
    }

    .header-cell {
        color: #000000;
        font-family: 'SFProDisplayBold', sans-serif;
        font-weight: 800;
    }

    .header-cell,
    .table-cell {
        padding: pxToRem(20);
        display: flex;
        align-items: center;
        font-size: pxToRem(16);
        justify-content: center;

        &:first-child {
            display: flex;
            align-items: center;
            gap: pxToRem(10);
        }
    }

    // 新的宽度控制类
    .header-spacer,
    .table-spacer {
        flex: 1;
        min-width: pxToRem(50);
        max-width: pxToRem(100);
    }

    .header-fixed,
    .table-fixed {
        width: pxToRem(321.75); // 1287px / 4 = 321.75px
        flex-shrink: 0;
    }

    .cell-icon {
        font-size: pxToRem(20);
        display: flex;
        align-items: center;
        margin-right: pxToRem(19);
        img {
            width: pxToRem(20);
            height: pxToRem(20);
        }
    }

    // 分配设计逻辑
    .distribution-logic-section {
        margin-bottom: pxToRem(100);
    }

    .logic-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: pxToRem(40);
        gap: pxToRem(60);
    }

    .pie-chart-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pie-chart {
        width: pxToRem(1708);
        height: pxToRem(656);
        img {
            width: pxToRem(1708);
            height: pxToRem(656);
        }
        // width: pxToRem(400);
        // height: pxToRem(400);
        // border-radius: 50%;
        // position: relative;
        // background: conic-gradient(
        //     #ff6b9d 0deg 144deg,
        //     #fd79a8 144deg 252deg,
        //     #f8d7da 252deg 324deg,
        //     #f5c6cb 324deg 360deg
        // );
        // box-shadow: 0 pxToRem(20) pxToRem(40) rgba(255, 107, 157, 0.2);

        // &::before {
        //     content: '';
        //     position: absolute;
        //     top: 50%;
        //     left: 50%;
        //     transform: translate(-50%, -50%);
        //     width: pxToRem(200);
        //     height: pxToRem(200);
        //     border-radius: 50%;
        //     background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
        //     box-shadow: inset 0 pxToRem(10) pxToRem(20) rgba(0, 0, 0, 0.1);
        // }

        // &::after {
        //     content: '';
        //     position: absolute;
        //     top: 50%;
        //     left: 50%;
        //     transform: translate(-50%, -50%);
        //     width: pxToRem(120);
        //     height: pxToRem(120);
        //     border-radius: 50%;
        //     background: #fff;
        //     box-shadow: 0 pxToRem(5) pxToRem(15) rgba(0, 0, 0, 0.1);
        // }
    }

    .logic-descriptions {
        display: flex;
        flex-direction: column;
        gap: pxToRem(40);
        max-width: pxToRem(1170);
        width: 100%;
        margin-bottom: pxToRem(163);

        .logic-item {
            font-size: pxToRem(35);
            font-weight: 300;
            line-height: 1.5;
            color: #333;
            text-align: left;

            strong {
                color: #000;
                font-family: 'SFProDisplayBold', sans-serif;
                font-weight: 700;
            }
        }
    }

    // 代币功能和应用场景
    .token-functions-section {
        margin-bottom: pxToRem(100);
    }

    .functions-table {
        // border-radius: pxToRem(12);
        overflow: hidden;
        // box-shadow: 0 pxToRem(4) pxToRem(20) rgba(0, 0, 0, 0.1);
    }

    .functions-table .table-header {
        display: flex;
        background: #f7f7f7;
        font-weight: 700;
        color: #333;
        justify-content: center;
    }

    .functions-table .table-row {
        display: flex;
        // border-bottom: 1px solid #e9ecef;
        justify-content: center;

        background: #f7f7f7;
        &:nth-child(even) {
            background: #fff;
        }
    }

    // 响应式设计 - 平板端
    @include tablet {
        .basic-info-grid {
            grid-template-columns: 1fr;
            gap: pxToRem(40);
        }

        .strategic-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: pxToRem(20);
        }

        .logic-content {
            gap: pxToRem(10);
            margin-top: pxToRem(20);
            margin-bottom: pxToRem(20);
        }

        .pie-chart {
            width: pxToRem(300);
            height: pxToRem(300);

            &::before {
                width: pxToRem(150);
                height: pxToRem(150);
            }

            &::after {
                width: pxToRem(90);
                height: pxToRem(90);
            }
        }

        .logic-descriptions {
            gap: pxToRem(15);
            max-width: pxToRem(500);

            .logic-item {
                font-size: pxToRem(15);
            }
        }

        .table-container {
            // margin: pxToRem(40) pxToRem(-20) 0;
            // padding: 0 pxToRem(20);
            margin: 0;
            padding: 0;
        }

        .table-header,
        .table-row {
            grid-template-columns: 1fr;
            gap: pxToRem(10);
        }

        .functions-table {
            width: 100%;
        }

        .functions-table .table-header,
        .functions-table .table-row {
            flex-wrap: nowrap;
            justify-content: center;
        }

        .functions-table .header-spacer,
        .functions-table .table-spacer {
            min-width: pxToRem75(20);
            max-width: pxToRem75(30);
        }

        .functions-table .header-fixed,
        .functions-table .table-fixed {
            width: pxToRem75(140);
        }

        .section-title {
            font-size: pxToRem(36);
        }

        .section-description {
            font-size: pxToRem(18);
            font-weight: 300;
        }
    }

    // 响应式设计 - 移动端
    @include mobile {
        .main-content {
            padding: pxToRem75(88) pxToRem75(20);
        }

        .section-title {
            font-size: pxToRem75(60);
            margin-top: pxToRem75(0);
            margin-bottom: pxToRem75(82);
        }

        .info-content {
            .info-subtitle {
                font-size: pxToRem75(60);
                margin-top: pxToRem75(30);
                margin-bottom: pxToRem75(40);
            }
        }

        .section-description {
            font-size: pxToRem75(28);
            margin-bottom: pxToRem75(30);
        }

        .basic-info-grid {
            grid-template-columns: 1fr;
            gap: pxToRem75(30);
            margin-top: pxToRem75(20);
        }
        .info-image img {
            border-radius: pxToRem75(30);
        }
        .basic-info-section {
            margin-bottom: pxToRem75(40);
        }

        .parameter-list .parameter-item {
            flex-direction: column;
            margin-bottom: pxToRem75(30);
            font-size: pxToRem75(25);
            text-align: left;
            .parameter-label {
                min-width: auto;
                margin-right: 0;
                margin-bottom: pxToRem75(19);
                font-size: pxToRem75(34);
            }

            .parameter-value {
                font-size: pxToRem75(28);
            }
        }

        .strategic-grid {
            grid-template-columns: 1fr;
            gap: pxToRem75(30);
            margin-top: pxToRem75(32);
        }

        .strategic-card {
            padding: pxToRem75(20);
        }

        .strategic-image {
            width: 100%;
            height: auto;
            margin-bottom: pxToRem75(19);
        }

        .strategic-value-section {
            margin-bottom: pxToRem75(40);
        }
        .distribution-section {
            margin-bottom: pxToRem75(40);
        }
        .distribution-logic-section {
            margin-bottom: pxToRem75(40);
        }
        .token-functions-section {
            margin-bottom: pxToRem75(40);
        }
        .functional-positioning-section {
            margin-bottom: pxToRem75(40);
        }

        .strategic-title {
            font-size: pxToRem75(28);
            margin-bottom: pxToRem75(5);
            margin-top: pxToRem75(24);
        }
        .pie-chart {
            width: 100%;
            height: auto;
            img {
                width: 100%;
                height: auto;
            }
        }

        .strategic-description {
            font-size: pxToRem75(28);
        }

        // .pie-chart {
        //     width: pxToRem75(300);
        //     height: pxToRem75(300);

        //     &::before {
        //         width: pxToRem75(150);
        //         height: pxToRem75(150);
        //     }

        //     &::after {
        //         width: pxToRem75(90);
        //         height: pxToRem75(90);
        //     }
        // }

        .logic-descriptions {
            gap: pxToRem75(30);
            max-width: pxToRem75(600);
            margin-bottom: pxToRem75(20);
            .logic-item {
                font-size: pxToRem75(28);
            }
        }

        .header-cell,
        .table-cell {
            padding: pxToRem75(20);
            font-size: pxToRem75(28);
        }

        .logic-descriptions .logic-item {
            font-size: pxToRem75(28);
            margin-bottom: pxToRem75(30);
        }

        .table-container {
            // margin: pxToRem75(40) pxToRem75(-20) 0;
            // padding: 0 pxToRem75(20);
            margin: 0;
            padding: 0;
            left: 0;
            top: 0;
        }

        .distribution-table {
            // transform: scale(0.7); // 整体缩放70%
            // transform-origin: center top;
            // width: 142.86%; // 1/0.7 = 142.86% 补偿缩放后的宽度
            // margin-left: -21.43%; // 居中补偿
            width: 100%;
        }

        .table-header,
        .table-row {
            flex-wrap: nowrap; // 不换行
            justify-content: center;
            // .table-cell:nth-last-child(2) {
            //     width:  pxToRem75(150);
            // }
        }

        .header-spacer,
        .table-spacer {
            min-width: pxToRem75(20); // 缩小间距
            max-width: pxToRem75(30);
        }

        .header-fixed,
        .table-fixed {
            // width: pxToRem75(200); // 缩小固定宽度
            width: pxToRem75(120);
        }

        .header-cell,
        .table-cell {
            padding: pxToRem75(10); // 缩小内边距
            font-size: pxToRem75(20); // 缩小字体
        }

        .cell-icon {
            font-size: pxToRem75(16); // 缩小图标
            margin-right: pxToRem75(10);
            img {
                width: pxToRem75(35);
                height: pxToRem75(35);
            }
        }
    }
</style>
